<!doctype html>
<html>
    <head>
        <title>调试信息手册 - HT for Web</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="user-scalable=yes, width=1024">
        <style type="text/css">
            h1, h2, h3, h4, h5, h6, p, blockquote {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
                font-size: 13px;
                line-height: 18px;
                color: #737373;
                background-color: white;
                margin: 10px 13px 10px 13px;
            }
            table {
                margin: 10px 0 15px 0;
                border-collapse: collapse;
            }
            td,th {
                border: 1px solid #ddd;
                padding: 3px 10px;
            }
            th {
                padding: 5px 10px;
            }
            a {
                color: #0069d6;
            }
            a:hover {
                color: #0050a3;
                text-decoration: none;
            }
            a img {
                border: none;
            }
            p {
                margin-bottom: 9px;
            }
            h1, h2, h3, h4, h5, h6 {
                color: #404040;
                line-height: 36px;
            }
            h1 {
                margin-bottom: 18px;
                font-size: 30px;
            }
            h2 {
                font-size: 24px;
            }
            h3 {
                font-size: 18px;
            }
            h4 {
                font-size: 16px;
            }
            h5 {
                font-size: 14px;
            }
            h6 {
                font-size: 13px;
            }
            hr {
                margin: 0 0 19px;
                border: 0;
                border-bottom: 1px solid #ccc;
            }
            blockquote {
                padding: 13px 13px 21px 15px;
                margin-bottom: 18px;
                font-family:georgia,serif;
                font-style: italic;
            }
            blockquote:before {
                content:"\201C";
                font-size:40px;
                margin-left:-10px;
                font-family:georgia,serif;
                color:#eee;
            }
            blockquote p {
                font-size: 14px;
                font-weight: 300;
                line-height: 18px;
                margin-bottom: 0;
                font-style: italic;
            }
            code, pre {
                font-family: Monaco, Andale Mono, Courier New, monospace;
            }
            code {
                background-color: #fee9cc;
                color: rgba(0, 0, 0, 0.75);
                padding: 1px 3px;
                font-size: 12px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
            }
            pre {
                display: block;
                padding: 14px;
                margin: 0 0 18px;
                line-height: 16px;
                font-size: 11px;
                border: 1px solid #d9d9d9;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
            pre code {
                background-color: #fff;
                color:#737373;
                font-size: 11px;
                padding: 0;
            }
            sup {
                font-size: 0.83em;
                vertical-align: super;
                line-height: 0;
            }
            * {
                -webkit-print-color-adjust: exact;
            }
            @media screen and (min-width: 914px) {
                body {
                    width: 854px;
                    margin:10px auto;
                }
            }
            @media print {
                body,code,pre code,h1,h2,h3,h4,h5,h6 {
                    color: black;
                }
                table, pre {
                    page-break-inside: avoid;
                }
            }
            iframe{
                width: 100%;
                border: 1px solid #34495E;
                margin: 0;
            }
            .logo{
                vertical-align: middle;
            }

        </style>
        <script>
            function init() {
                var logoSrc = '',
                    logos = document.querySelectorAll('.logo'),
                    i = 0;
                for (; i < logos.length; i++) {
                    logos[i].src = logoSrc;
                }

                var iframes = document.querySelectorAll('iframe'),
                    func = function(){};
                for (i=0; i < iframes.length; i++) {
                    var iframe = iframes[i];

                    // a small hack to make it work on android
                    iframe.ontouchstart = func;

                    if (window.location && window.location.hostname && window.location.hostname.indexOf('hightopo') >= 0) {
                        var div = document.createElement('div');
                        div.style.float = 'left';
                        div.innerHTML = '<a href="https://hightopo.com/codeeditor/index.html?url=' + iframe.contentWindow.location.pathname + '" target="_blank">在线编辑</a>';
                        iframe.parentNode.insertBefore(div, iframe);

                        var div = document.createElement('div');
                        div.style.float = 'left';
                        div.innerHTML = '&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;';
                        iframe.parentNode.insertBefore(div, iframe);
                    }

                    var div = document.createElement('div');
                    div.innerHTML = '<a href="' + iframe.src + '" target="_blank">独立运行→</a>';
                    iframe.parentNode.insertBefore(div, iframe);
                }
            }
        </script>
    </head>
    <body onload="init();">
        <a href="http://www.hightopo.com"><img class="logo"></a>HT for Web 调试信息手册
        <hr style="margin: 1px 0 20px 0">
<p>索引</p>

<ul><li><a href="#ref_overview">概述</a></li><li><a href="#ref_debugtip">调试信息</a><ul><li><a href="#ref_debugnormal">通用调试信息</a></li><li><a href="#ref_debug3d">3D额外调试信息</a></li></ul></li></ul>

<hr/>

<div id="ref_overview"></div>

<h2>概述</h2>

<p><code>HT</code>的场景无论是<code>3D</code>或者<code>2D</code>均可以通过调用<code>view.showDebugTip</code>方法来打开调试摘要信息，其中包含最重要的<code>FPS</code>数据。根据<code>FPS</code>我们可以简单的知道当前场景运行的流畅程度。此外我们还针对<code>3D</code>提供更多的信息便于给出更准确的优化方向。</p>

<div id="ref_debugtip"></div>

<h2>调试信息</h2>

<p>通过<code>view.showDebugTip()</code>来打开调试信息，打开<code>debugTip</code>之后<code>HT</code>会在屏幕左上角增加一个<code>div</code>显示信息文本，并且调用<code>requestAnimationFrame</code>来进行<code>全力</code>绘制，以便知道当前场景的帧率<code>FPS</code>能到达多少</p>

<pre><code>// 2D
graphView.showDebugTip();
// 3D
graph3dView.showDebugTip();</code></pre>

<p>通过<code>view.hideDebugTip()</code>来关闭调试信息，对应会移除调试<code>div</code>并且不再进行<code>requestAnimationFrame</code>驱动绘制</p>

<p><iframe src="examples/example_debugtip2d.html" style="height:400px"></iframe></p>

<div id="ref_debugnormal"></div>

<h2>通用调试信息</h2>

<p>调试信息的头部包含几项最基础的信息，包括如下：</p>

<ul><li><code>FPS</code>：<code>frames per second</code>即帧率，表示一秒中<code>HT</code>进行的绘制次数。一般如果<code>FPS</code>数据是个位数就会比较感觉卡顿</li><li><code>Datas</code>：场景中<code>Data</code>的数量，即<code>view.dm().getDatas()</code>的数量。一般我们建议能控制在千以内。万级别的<code>Datas</code>单调度遍历都需要一定的开销</li><li><p><code>Size</code>：场景画布的实际大小，画布决定了<code>GPU</code>显卡到底要绘制多少的缓冲区。大部分场景的宽落在<code>2000</code>以内，对于<code>mobile</code>环境一般多在<code>1000</code>左右或者更低的宽。另外部分情况下，例如大屏的硬件像素宽度可能高达 2 万，但实际像素是不会开具这么高，可以通过设置<code>devicPixelRatio</code>来<code>降分辨率</code>（在<code>ht.js</code>引入之前设置）：</p><pre><code>&lt;script&gt;
    htconfig = {
        Default : {
            devicePixelRatio : 0.5
        }
    };
&lt;/script&gt;
&lt;script src=&quot;ht.js&quot;&gt;&lt;/script&gt;</code></pre></li></ul>

<p>这里还有一点需要注意，<code>mobile</code>端一般是需要设置上<code>viewport</code>，不设置的情况下画布会撑到硬件像素点数量，再叠加上<code>devicePixelRatio</code>作用会导致<code>canvas</code>画布大小最终是实际硬件像素的若干倍最终导致很卡。具体设置方法如下：</p>

<pre><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, user-scalable=0&quot;&gt;</code></pre>

<div id="ref_debug3d"></div>

<h2>3D额外调试信息</h2>

<p><code>3D</code>调试信息提供了额外的一些数据，便于了解当前场景的性能指标，定位具体的性能问题：</p>

<ul><li><code>Draw Calls</code>：绘制的次数统计。相同的材质通过<code>batch</code>可以减少<code>Draw Calls</code>所以多个<code>Datas</code>可以一笔绘制。六面体由于六个面可以指定不同材质所以虽然一个<code>Data</code>但是对应的<code>Draw calls</code>统计是<code>6</code>。该数值越小越好，通过<a href="../../core/batch/ht-batch-guide.html">批量手册</a>批量来降低。</li><li><code>Vertices</code>：场景中顶点总数量。该数值越小越好。该数值跟<code>Faces</code>是正相关</li><li><code>Faces</code>：场景中的总面数，该数值越小越好。面数是<code>3D</code>场景很重要的指标，考虑<code>web</code>的流畅性我们一般建议是控制面数在<code>10</code>万级别比较合适。超过百万的面一般除非是特定高端显卡驱动，否则大部分建议设计师通过<code>3D</code>设计工具来减面以优化流畅度（可以通过贴图高清来提升场景品质）</li><li><code>Lines</code>：绘制的线条总数，包括物体线框和<code>polyline</code>等产生的线条</li><li><code>Buffer Count</code>：<code>HT</code>中创建的用于描述物体顶点，<code>uv</code>等信息的<code>Buffer</code>数量</li><li><code>2D Dynamic Textures</code>：每帧根据<code>2D</code>矢量动态生成的贴图数量；<code>HT</code>中用<code>2D json</code>矢量来做贴图时，本质上会把<code>2D矢量</code>绘制到位图上，该绘制是性能开销比较重大。一般如果矢量没有动态变化信息，我们建议设置上<code>texture.cache</code>来通知<code>HT</code>把矢量缓存下来不再更新，具体参见：<a href="../../core/3d/ht-3d-guide.html#ref_billboard">3D手册</a>中对<code>texture.cache</code>的说明</li><li><code>2D Dynamic Pixels</code>：每帧根据<code>2D</code>矢量动态生成的贴图像素点总和</li></ul>

<p><iframe src="examples/example_debugtip3d.html" style="height:400px"></iframe></p>    <hr id="contact" style="margin: 20px 0 1px 0">
    <a href="http://www.hightopo.com"><img class="logo"></a>欢迎交流 <a href="mailto:service@hightopo.com">service@hightopo.com</a>
</body>
</html>
